<template>
  <div class="parking-add">
    <el-form ref="form" :model="form" label-width="120px">
      <!-- <el-form-item label=故障原因>
        <el-input v-model="form.name"></el-input>
      </el-form-item> -->
      <!-- :props="cascader_props" -->
      <!-- <el-form-item label="区域" label-width="120px"> -->
         <!-- <el-cascader  v-for="text in province" :key="text.id" v-model="form.area" :options="province.pname" ></el-cascader> -->      
        
      <!-- </el-form-item> -->

      <!-- <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option  v-for="text in province" :key="text.id" :label="text.pname" :value="text.pid"></el-option>
    </el-select>
  </el-form-item> -->

   <el-form-item label="名字" label-width="120px">
        <el-input v-model="form.uname"></el-input>
      </el-form-item>

<el-form-item label="用户职业" label-width="120px">
        <el-input v-model="form.uoccupation"></el-input>
      </el-form-item>

      <!-- <el-form-item label="性别" label-width="120px">
        <el-input v-model="form.ugender"></el-input>
      </el-form-item> -->

       <el-form-item label="性别">
    <el-select v-model="form.ugender" placeholder="请选择活动区域">
      <el-option label="男" value="男"></el-option>
      <el-option label="女" value="女"></el-option>
    </el-select>
  </el-form-item>
  
  <el-form-item label="省份">
    <el-select v-model="form.uaddress" placeholder="请选择活动区域">
      <el-option label="四川省" value="四川省"></el-option>
      <el-option label="福建省" value="福建省"></el-option>
      <el-option label="广州省" value="广州省"></el-option>
      <el-option label="江西省" value="江西省"></el-option>
      <el-option label="贵州省" value="贵州省"></el-option>
      <el-option label="重庆市" value="重庆市"></el-option>
      <el-option label="云南省" value="云南省"></el-option>
      <el-option label="湖北省" value="湖北省"></el-option>
      <el-option label="江苏省" value="江苏省"></el-option>
    </el-select>
  </el-form-item>

      <!-- <el-form-item label="类型" label-width="120px">
        <el-radio-group v-model="form.resource">
          <el-radio label="室内"></el-radio>
          <el-radio label="室外"></el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item label="邮箱" label-width="120px">
        <el-input v-model="form.email"></el-input>
      </el-form-item>

      <!-- <el-form-item label="禁启用">
     <el-select v-model="form.state" placeholder="请选择活动区域">
      <el-option label="禁用" value="false"></el-option>
      <el-option label="启用" value="true"></el-option>
    </el-select>
    </el-form-item> -->

      <!-- <el-form-item label="禁启用" label-width="120px">
        <el-radio-group v-model="form.state">
          <el-radio label="禁用" value="false" ></el-radio>
          <el-radio label="启用" value="true"></el-radio>
        </el-radio-group>
      </el-form-item> -->

      <el-form-item label="位置">
        <div class="address-map">
          <GaodeMap @lonlag="aaaa" />
        </div>
      </el-form-item>

      <el-form-item label="经纬度">
        <el-input v-model="form.ulongitude"></el-input>
      </el-form-item>
      <!-- <el-form-item label="经度">
        <el-input v-model="form.lng"></el-input>
      </el-form-item>
      <el-form-item label="纬度">
        <el-input v-model="form.lat"></el-input>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import GaodeMap from "./GaodeMap";
export default {
  name: "parking-add",
  data() {
    return {
    
      form: {
       uname: "",
        ulongitude: "",
        uoccupation: "",
       ugender: "",
        uaddress: "",
        email:"",   
      },
      province:[
        
      ],
      options: [
        //  value="",
        //  label=this.province.pname,
        // {
        //   value: 1111,
        //   label: "四川省",
        //   children: [
        //     {
        //       value: "1111",
        //       label: "成都市",
        //       children: [
        //         {
        //           value: "1111",
        //           label: "高新区"
        //         }
        //       ]
        //     },
        //     {
        //       value: "1111",
        //       label: "南充市"
        //     }
        //   ]
        // }
      ],
      cascader_props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const level = node.level;
          //请求参数
          const requestData = {};
          if (level == 0) {
            requestData.type = "procince";
          }
          getprovince().then(resonse => {
            console.log(resonse);
          });
        }
      }
    };
  },
  components: { GaodeMap },
   created() {
    //生命周期方法
    // this.getprovince();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
       this.$axios
            .post("http://localhost:8601/finance/addUserdetails", this.form)
            .then(resp => {
              this.$message("添加成功");
              
            });

    },
    aaaa(data) {
      console.log(data);
      this.form.ulongitude = data.value;
      // this.form.lng = data.lng;
      // this.form.lat = data.lat;
    },
    // getprovince() {
    //   this.$axios
    //     .get("http://localhost:8601/staff/getAllStaffLog", {
    //       params: {
    //         // pageIndex: this.pageIndex,
    //         // pageSize: this.pageSize,
    //       }
    //     })
    //     .then(resp => {
    //       this.province = resp.data;
    //       console.log(this.province)
    //     });
    // }
  }
};
</script>

<style lass="scss" scoped>
.address-map {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
</style>


